import React, { Component } from 'react';
import { NavBar, Space, ActionSheet, Dialog, Toast, Mask } from 'antd-mobile';
import { SetOutline } from 'antd-mobile-icons';
import "../../../styles/Index/Mine/Header.scss"
import { withRouter } from 'react-router-dom';
import store from "../../../store/index"
import {bindusername,updatepass} from "../../../api/index"

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            right: (
                <div style={{ fontSize: 24 }} >
                    <Space style={{ '--gap': '16px' }}>
                        <SetOutline onClick={() => { this.openSet() }} />
                    </Space>
                </div>
            ),
            actions: [
                {
                    text: '修改昵称',
                    key: 'ChangeNickname',
                    onClick: () => { this.openNameDialog() }
                },
                {
                    text: '修改密码',
                    key: 'ChangePassword',
                    onClick: () => { this.openPassDialog() }
                },
                {
                    text: '退出登陆',
                    key: 'logout',
                    danger: true,
                    bold: true,
                    onClick: async () => {
                        const result = await Dialog.confirm({ content: '确定要退出登录吗？' })
                        if (result) {
                            localStorage.removeItem('token')
                            localStorage.removeItem('userid')
                            Toast.show('已退出登录')
                            this.props.history.push('/index')
                            this.closeSet();
                        }
                    },
                },
            ],
            visible: false,
            background: false,
            nackname: '',
            openname: false,
            openpass: false,
            oldpass: '',
            newpass: ''
        }
    }
    //设置
    openSet() {
        this.setState({ visible: true })
    }
    closeSet() {
        this.setState({ visible: false })
        localStorage.removeItem('time')
        localStorage.removeItem('searchlist')
        localStorage.removeItem('userinfo')
        localStorage.removeItem('token')
        localStorage.removeItem('userid')
    }
    //修改用户名（昵称）
    getNewName(e) {
        this.setState({ nackname: e.target.value })
    }
    openNameDialog() {
        this.setState({ openname: true, visible: false, background: true })
    }
    closeNameDialog() {
        this.setState({ openname: false, background: false })
    }
    async bindUserName() {
        store.dispatch({
            type: 'BINDUSERNAME',
            name: this.state.nackname
        })
        let res = await bindusername({ userid: localStorage.getItem('userid'), username: this.state.nackname })
        console.log(res.data)
        this.setState({});
        this.closeNameDialog();
    }
    //更改密码
    openPassDialog() {
        this.setState({ openpass: true, visible: false, background: true })
    }
    closePassDialog() {
        this.setState({ openpass: false, background: false })
    }
    getPass(e) {
        this.setState({ [e.target.name]: e.target.value })
    }
    async updatePass() {
        let res = await updatepass({ userid: localStorage.getItem('userid'), oldpassword: this.state.oldpass, newpassword: this.state.newpass })
        console.log(this.state.oldpass)
        console.log(this.state.newpass)
        console.log(res.data)
        if (res.data.code == 200) {
            localStorage.removeItem('time')
            localStorage.removeItem('searchlist')
            localStorage.removeItem('userinfo')
            localStorage.removeItem('token')
            localStorage.removeItem('userid')
            Toast.show('修改密码成功,请重新登录')
        }else if(res.data.code == 10030){
            Toast.show('原始密码错误')
        }
        this.closePassDialog();
    }
    render() {
        return (
            <div className='header'>
                <NavBar right={this.state.right} onBack={() => { this.props.history.go(-1) }}>
                    个人中心
                </NavBar>
                <ActionSheet
                    visible={this.state.visible}
                    actions={this.state.actions}
                    onClose={() => { this.closeSet() }}
                />
                <Mask
                    visible={this.state.background}
                    opacity='thick'
                />
                <div className={this.state.openname ? 'nackname-dialog' : 'nackname-dialog isshow'}>
                    <div className="newname">
                        <input type="text" value={this.state.nackname} onChange={(e) => { this.getNewName(e) }} placeholder="请输入新的昵称" />
                    </div>
                    <div className="btn">
                        <div onClick={() => { this.closeNameDialog() }}>取消</div>
                        <div onClick={() => { this.bindUserName() }}>修改</div>
                    </div>
                </div>
                <div className={this.state.openpass ? 'nackname-dialog' : 'nackname-dialog isshow'}>
                    <div className="newname">
                        <input type="password" name='oldpass' value={this.state.oldpass} onChange={(e) => { this.getPass(e) }} placeholder="请输入旧密码" />
                        <input type="password" name='newpass' value={this.state.newpass} onChange={(e) => { this.getPass(e) }} placeholder="请输入新密码" />
                    </div>
                    <div className="btn">
                        <div onClick={() => { this.closePassDialog() }}>取消</div>
                        <div onClick={() => { this.updatePass() }}>修改</div>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(Header);